// 电影类型分布玫瑰图API数据格式要求：
// [
//   { value: 45, name: '剧情' },
//   { value: 35, name: '动作' },
//   ...
// ]
// 如果API可用则优先显示API数据，否则显示默认数据

document.addEventListener('DOMContentLoaded', function() {
    // 获取图表容器
    const chartDom = document.getElementById('typePie');
    // 初始化echarts实例
    const chart = echarts.init(chartDom);
    
    // 显示加载动画
    chart.showLoading({
        text: '数据加载中...', // 加载时显示的文字
        color: '#14c8fd', // 加载动画颜色
        textColor: '#fff', // 文字颜色
        maskColor: 'rgba(13, 26, 45, 0.8)' // 遮罩颜色
    });

    // 默认数据（如果API不可用则显示这些）
    let data = [
        { value: 45, name: '剧情' },
        { value: 35, name: '动作' },
        { value: 30, name: '科幻' },
        { value: 28, name: '爱情' },
        { value: 25, name: '动画' },
        { value: 22, name: '喜剧' },
        { value: 20, name: '冒险' },
        { value: 18, name: '犯罪' },
        { value: 15, name: '悬疑' },
        { value: 12, name: '奇幻' }
    ];

    // API接口地址（如有则优先使用API数据）
    const apiUrl = '/api/typePie'; // 你可以将此处替换为你的实际API接口

    // 尝试从API获取数据
    fetch(apiUrl)
        .then(res => {
            if (!res.ok) throw new Error('Network response was not ok'); // 网络异常处理
            return res.json(); // 解析JSON
        })
        .then(json => {
            // 判断API返回的数据格式是否正确
            if (json.code === 200 && Array.isArray(json.data) && json.data.length > 0) {
                data = json.data; // 使用API数据
            }
        })
        .catch(err => {
            // 如果API获取失败则使用默认数据
            console.warn('使用默认数据，API获取失败：', err);
        })
        .finally(() => {
            renderChart(data); // 渲染图表
        });

    // 渲染图表的函数
    function renderChart(data) {
        // 图表配置项
        const option = {
            backgroundColor: 'transparent', // 背景透明
            title: {
                text: '电影类型分布', // 标题
                left: 'center', // 居中
                top: 20, // 距离顶部20px
                textStyle: {
                    color: '#fff', // 标题颜色
                    fontSize: '16' // 标题字体大小
                }
            },
            tooltip: {
                trigger: 'item', // 悬浮提示类型
                formatter: '{a} <br/>{b} : {c} ({d}%)', // 提示内容格式
                backgroundColor: 'rgba(13, 26, 45, 0.8)', // 提示框背景色
                borderColor: '#14c8fd', // 边框颜色
                textStyle: {
                    color: '#fff' // 文字颜色
                }
            },
            legend: {
                top: 'bottom', // 图例在底部
                itemWidth: 10, // 图例标记宽度
                itemHeight: 10, // 图例标记高度
                textStyle: {
                    color: '#fff', // 图例文字颜色
                    fontSize: 12 // 图例文字大小
                }
            },
            series: [
                {
                    name: '电影类型', // 系列名称
                    type: 'pie', // 饼图
                    radius: ['25%', '60%'], // 饼图内外半径
                    center: ['50%', '55%'], // 饼图中心位置
                    roseType: 'radius', // 玫瑰图模式
                    itemStyle: {
                        borderRadius: 8, // 扇区圆角
                        borderColor: '#fff', // 扇区边框颜色
                        borderWidth: 2, // 扇区边框宽度
                        color: function(params) {
                            // 自定义颜色列表
                            const colorList = [
                                '#14c8fd',
                                '#43eec6',
                                '#ff69b4',
                                '#f93a64',
                                '#ffbb44',
                                '#41f1b6',
                                '#4575b4',
                                '#74add1',
                                '#abd9e9',
                                '#e0f3f8'
                            ];
                            return colorList[params.dataIndex]; // 按顺序取色
                        }
                    },
                    label: {
                        show: false, // 显示标签
                        color: '#fff', // 标签文字颜色
                        formatter: '{b}\n{c}部', // 标签内容格式
                        distance: 10 // 标签距离图形的距离
                    },
                    labelLine: {
                        show: false, // 显示标签引导线
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.3)' // 标签引导线颜色
                        },
                        smooth: 0.2, // 引导线平滑度
                        length: 8,   // 第一段引导线长度
                        length2: 12  // 第二段引导线长度
                    },
                    animationType: 'scale', // 动画类型
                    animationEasing: 'elasticOut', // 动画缓动效果
                    animationDelay: function (idx) {
                        return Math.random() * 200; // 动画延迟
                    },
                    emphasis: {
                        scale: true, // 高亮时放大
                        scaleSize: 10, // 放大倍数
                        itemStyle: {
                            shadowBlur: 20, // 阴影模糊
                            shadowColor: 'rgba(0, 0, 0, 0.5)' // 阴影颜色
                        }
                    },
                    data: data // 饼图数据
                }
            ]
        };

        // 使用配置项显示图表
        chart.hideLoading(); // 隐藏加载动画
        chart.setOption(option); // 设置图表配置

        // 自动轮播高亮效果
        let currentIndex = -1;
        let timeId = setInterval(function () {
            const dataLen = option.series[0].data.length;
            // 取消之前高亮的图形
            chart.dispatchAction({
                type: 'downplay',
                seriesIndex: 0,
                dataIndex: currentIndex
            });
            currentIndex = (currentIndex + 1) % dataLen;
            // 高亮当前图形
            chart.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex: currentIndex
            });
            // 显示 tooltip
            chart.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: currentIndex
            });
        }, 3000);

        // 鼠标移入停止自动高亮
        chart.on('mouseover', function(params) {
            clearInterval(timeId);
            chart.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex: params.dataIndex
            });
        });

        // 鼠标移出恢复自动高亮
        chart.on('mouseout', function(params) {
            chart.dispatchAction({
                type: 'downplay',
                seriesIndex: 0,
                dataIndex: params.dataIndex
            });
            timeId = setInterval(function () {
                const dataLen = option.series[0].data.length;
                currentIndex = (currentIndex + 1) % dataLen;
                chart.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: currentIndex
                });
                chart.dispatchAction({
                    type: 'showTip',
                    seriesIndex: 0,
                    dataIndex: currentIndex
                });
            }, 3000);
        });

        // 监听窗口大小变化，自适应图表
        window.addEventListener('resize', function() {
            chart.resize();
        });
    }
}); 